<template>

  <div v-hasPerms="'system:user:add'">
    <el-button>添加</el-button>
  </div>
  <div v-hasPerms="'system:user:edit'">
    <el-button>修改</el-button>
  </div>


  <el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="small" @click="pageQueryList" plain>搜索</el-button>

      </el-form-item>
    </el-form>
  </el-row>

  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="primary" plain icon="Plus" size="small" @click="toAdd">新增</el-button>
    </el-col>

  </el-row>

  <el-row v-loading="loading">

    <el-table :data="tableData" align="center">

      <!-- <el-table-column prop="userid" label="用户id" /> -->
      <el-table-column type="index" label="序号" width="120"/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="nickname" label="昵称"/>
      <el-table-column prop="expire" label="过期时间"/>
      <el-table-column prop="lastlogin" label="最后一次登录时间"/>
      <el-table-column prop="createTime" label="用户创建时间"/>
      <el-table-column label="操作">
        <template #default="scope">
          <!-- 修改按钮 -->

          <el-button size="small" link type="primary" icon="Edit"
                     @click="toEdit(scope.row.id)">修改
          </el-button>

          <!-- 删除按钮 -->
          <el-button size="small" link type="primary" icon="DeleteFilled"
                     @click="pageRemoveById(scope.row.id)">删除
          </el-button>

          <!-- 删除按钮 -->
          <el-button size="small" link type="primary" icon="DeleteFilled"
                     @click="userRole(scope.row.id)">分配角色
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams.total"
                   v-model:page-size="queryParams.size" v-model:current-page="queryParams.current"
                   @current-change="pageQueryList" @size-change="pageQueryList"
                   :page-sizes="[2, 3, 5, 10, 20, 30, 40, 50, 100]"/>
  </el-row>


  <el-dialog v-model="showEdit" title="用户编辑" style="width: 800px;">
    <Edit v-if="showEdit" :closeDialog="closeDialog" :editId="editId"/>
  </el-dialog>


  <!--  授权的页面-->
  <el-dialog v-model="showUserRole" title="分配角色" style="width: 800px;">
    <UserRole v-if="showUserRole" :closeDialog="closeUserRoleDialog" :userId="userId"/>
  </el-dialog>


</template>

<script setup name="User">
import {onMounted, ref} from 'vue'

import Edit from './edit.vue'
import UserRole from './user_role.vue'
//导入crud的API接口
import {querylist, removeById} from '@/api/permission/user/index'
import {ElMessageBox, ElNotification} from 'element-plus'


//定义数据

//表格数据
const tableData = ref([])

//表格 loading 加载状态， true 转圈， false 取消loading

const loading = ref(false);

//是否展示修改 的表单
const showEdit = ref(false)

//待修改的id
const editId = ref(0);

//是否显示授权 页面
const showUserRole = ref(false)
//需要授权的用户id
const userId = ref(0);

//查询条件
const queryParams = ref({
  nickname: '',
  size: 10,
  current: 1,
  total: 0
})


/**
 * 使用await 关键字，将返回Promise对象的异步方法变成同步方法
 */
async function pageQueryList() {
  loading.value = true
  try {
    //调用分页的接口
    const page = await querylist(queryParams.value)
    //取消加载中的转圈效果
    loading.value = false

    //获取分页数据
    tableData.value = page.records;
    queryParams.value.total = page.total;
  } catch (e) {

  }
}


/**
 * 关闭表单的 dialog ，并重新查询
 */
const closeDialog = (query) => {
  //1 关闭表单的 dialog
  showEdit.value = false

  //2 重新查询
  if (query) {
    pageQueryList();
  }

}

//跳转到 修改页面
const toEdit = (id) => {

  //设置修改的id
  editId.value = id
  //跳转到修改页面
  showEdit.value = true

}

const toAdd = () => {
  //设置修改的id
  editId.value = null
  //跳转到修改页面
  showEdit.value = true
}

//关闭授权页面
const closeUserRoleDialog = () => {
  showUserRole.value = false
}
//显示授权页面
const userRole = (id) => {
  showUserRole.value = true
  userId.value = id;
}


//删除 按钮 点击事件 
const pageRemoveById = (id) => {

  ElMessageBox.confirm('确认删除?', 'Warning', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',})
      .then(() => {
        removeById(id).then(success => {
          ElNotification({
            title: '消息',
            type: 'success',
            message: "删除成功",
          })
          pageQueryList()
        })
      })

}


//加载当前页面完成之后 查询
onMounted(() => {
  pageQueryList()
})


</script>

<style scoped></style>
